html,
body {
  height: 100%;
}
.head_top {
  .w {
    width: 960px;
    margin: 0 auto;
    .logo {
      float: left;
      a {
        display: block;
      }
    }
    .r {
      float: right;
      margin-top: 34px;
      a {
        display: inline-block;
        margin-right: 24px;
      }
      .real {
        width: 110px;
        height: 31px;
        background-position: -6px 0;
        background: url(../img/header_corn_new_v2.png) no-repeat;
      }
      .you {
        width: 170px;
        height: 31px;
        background: url(../img/gild.png) no-repeat;
        background-position: 0 0;
      }
      .dian {
        width: 110px;
        height: 31px;
        background: url(../img/header_corn_new_v2.png) no-repeat;
        background-position: 0px -64px;
      }
    }
  }
}
.head_center {
  min-height: 500px;
  .w {
    width: 965px;
    min-height: 400px;
    margin: 120px auto;
    background: url(../img/loginPic.jpg) no-repeat;
    position: relative;
    .login {
      width: 356px;
      height: 414px;
      overflow: hidden;
      //   height: 478px;
      box-sizing: border-box;
      position: absolute;
      right: 0;
      top: -84px;
      z-index: 8;
      padding: 0 23px;
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 0 4px 1px rgba(250, 241, 241, 0.8);
      border: 1px solid #f1f0f0;
      .shadow_l,
      .shadow_r {
        width: 8px;
        height: 100%;
        position: absolute;
        top: 0;
        z-index: 9;
        background: url(../img/shadow.png) no-repeat;
        background-position: 0 0;
      }
      .shadow_l {
        left: -8px;
      }
      .shadow_r {
        right: 0px;
      }
      h2 {
        font-size: 20px;
        color: #e31256;
        font-weight: bold;
        line-height: 60px;
        height: 60px;
        margin-bottom: 15px;
        p {
          width: fit-content;
          font-size: 12px;
          color: #969696;
          float: right;
          font-weight: normal;
          a {
            color: #e31256;
          }
        }
      }
      .p1 {
        height: 30px;
        line-height: 30px;
      }
      .form1 {
        font-size: 12px;
        width: 300px;
        display: block;
        p {
          height: 43px;
          input {
            margin: 0;
            padding: 0;
            outline: none;
            border: none;
            border: 1px solid #cfcfcf;
            box-sizing: border-box;
          }
          input[type="text"]:focus {
            box-shadow: 0 0 4px 1px rgba(32, 157, 230, 40%);
            border-color: #a5d4ed;
          }
        }
        .p2 {
          height: 44px;
          margin-bottom: 26px;
          input {
            width: 300px;
            height: 44px;
            padding: 10px 8px 10px 38px;
          }
        }
        .p3 {
          margin-bottom: 30px;
          input {
            width: 136px;
            height: 43px;
            float: left;
            padding: 10px 8px 10px 38px;
          }
          .getpsd {
            width: 148px;
            height: 43px;
            float: right;
            font-size: 12px;
          }
        }
        .p5 {
          margin-bottom: 10px;
          height: 18px;
          line-height: 18px;
        }
        input[type="button"] {
          width: 300px;
          height: 40px;
          background-color: #f8296d;
          border: none;
          color: #fff;
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 20px;
        }
      }
      .form2 {
        width: 300px;
        display: none;
        font-size: 12px;
        p {
          input {
            margin: 0;
            padding: 0;
            outline: none;
            border: none;
            border: 1px solid #cfcfcf;
            box-sizing: border-box;
          }
          input[type="text"]:focus {
            box-shadow: 0 0 4px 1px rgba(32, 157, 230, 40%);
            border-color: #a5d4ed;
          }
        }
        .p2 {
          height: 44px;
          margin-bottom: 26px;
          input {
            width: 300px;
            height: 44px;
            padding: 10px 8px 10px 38px;
          }
        }
        .p3 {
          height: 43px;
          margin-bottom: 26px;
          input {
            width: 300px;
            height: 44px;
            padding: 10px 8px 10px 38px;
          }
        }
        .p4 {
          height: 34px;
          background-color: #e8e8e8;
          position: relative;
          margin-bottom: 30px;
          span {
            height: 34px;
            display: block;
            color: #333;
            top: 0;
            left: 0;
            position: absolute;
            text-align: center;
            line-height: 34px;
          }
          .tip {
            background: none;
            z-index: 9;
            width: 100%;
          }
          .cover {
            background-color: #7ac23c;
            width: 0;
            z-index: 8;
          }
          a {
            display: block;
            width: 40px;
            height: 32px;
            z-index: 9;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 32px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            cursor: move;
            user-select: none;
          }
          a.success {
            display: block;
            width: 40px;
            height: 32px;
            z-index: 9;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 32px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: #fff;
            cursor: move;
            user-select: none;
            &::after {
              content: "";
              display: block;
              width: 42px;
              height: 34px;
              background: url(../img/sign.png) no-repeat;
              background-position: 10px -118px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
        .p5 {
          margin-bottom: 10px;
          height: 18px;
          line-height: 18px;
        }
        input[type="button"] {
          width: 300px;
          height: 40px;
          background-color: #f8296d;
          border: none;
          color: #fff;
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 20px;
        }
      }
      .other_mode {
        font-size: 12px;
        p {
          &:nth-child(1) {
            margin-bottom: 14px;
          }
          &:nth-child(2) {
            line-height: 46px;
            // height: 60px;
            background-color: #fff;
            a {
              display: inline-block;
              width: 43px;
              height: 43px;
              background: url(../img/other_mode.jpg) no-repeat;
              margin-right: 10px;
              &:nth-child(5) {
                margin-right: 0;
              }
            }
            .qq {
              background-position: 0 0;
            }
            .apid {
              background-position: -57px 0;
            }
            .weibo {
              background-position: -114px 0;
            }
            .ths {
              background-position: -169px 0;
            }
            .baidu {
              background-position: -224px 0;
            }
            .chat {
              background-position: 0 -54px;
            }
            .rr {
              background-position: -57 -54px;
            }
            .tuan {
              background-position: -169px -54px;
            }
            .more {
              //   display: inline-block;
              cursor: pointer;
              float: right;
              //   margin-top: 12px;
              i {
                float: right;
                width: 18px;
                height: 17px;
                margin-top: 16px;
                margin-left: 4px;
                background: url(../img/other_mode.jpg) no-repeat;
                background-position: -274px -26px;
              }
            }
          }
        }
      }
    }
  }
}
